<template>
  <div>
    <el-card class="cardBox">
      <div class="title">
        <h1>大墩沟风机在线监测系统</h1>
      </div>
      <!-- <div
        style="
          display: flex;
          justify-content: space-between;
          margin-bottom: 50px;
        "
      >
        <el-button>1#报表</el-button>
        <el-button>2#报表</el-button>
        <el-button>报警记录</el-button>
        <el-button>历史曲线</el-button>
        <el-button>加热器控制</el-button>
        <el-button>变频器风门控制</el-button>
        <el-button>高压柜控制</el-button>
        <el-button>参数设置</el-button>
        <el-button>1#日报表</el-button>
        <el-button>2#日报表</el-button>
      </div>

      <div class="imgRow" style="display: flex">
        <div style="flex: 1">
          <div style="width: 100%; height: 100%; margin: 0 auto">
            <div>1#风机控制 自动</div>
            <div>
              <div>
                <el-button>一键正风</el-button>
                <el-button>2#倒1#</el-button>
              </div>
              <div>
                <el-button>一键反风</el-button>
                <el-button>故障复位</el-button>
              </div>
              <div>
                <el-button>一键停止</el-button>
              </div>
            </div>
          </div>
        </div>
        <div style="flex: 3">
          <div
            style="width: 100%; margin: 0 auto; background-color: aquamarine"
          >
            <img
              src="@/assets/images/belt1.png"
              style="width: 100%; height: 250px"
            />
          </div>
        </div>
        <div style="flex: 1">
          <div style="width: 100%; height: 100%; margin: 0 auto">
            <div>2#风机控制 自动</div>
            <div>
              <div>
                <el-button>一键正风</el-button>
                <el-button>2#倒1#</el-button>
              </div>
              <div>
                <el-button>一键反风</el-button>
                <el-button>故障复位</el-button>
              </div>
              <div>
                <el-button>一键停止</el-button>
              </div>
            </div>
          </div>
        </div>
      </div> -->

      <div style="border: 1px solid var(--el-border-color-light)">
        <el-row class="header-row">
          <el-col :span="8"></el-col>
          <el-col :span="8" class="title-col">
            <span>矿井风机参数</span>
          </el-col>
          <el-col :span="8" class="status-col">
            <div class="status-container">
              <div>
                <span>通讯故障</span>
                <i class="yuan yellow"></i>
              </div>
              <div>
                <span>无故障</span>
                <i class="yuan grey"></i>
              </div>
              <div>
                <span>运行</span>
                <i class="yuan green"></i>
              </div>
              <div>
                <span>报警</span>
                <i class="yuan red"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 表头 -->
        <el-row class="threeTitle">
          <el-col class="flex-center" style="flex: 0 0 20%; max-width: 20%"
            >1#风机一级电机运行参数</el-col
          >
          <el-col class="flex-center" style="flex: 0 0 20%; max-width: 20%"
            >1#风机二级电机运行参数</el-col
          >
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 20%; max-width: 20%"
            >2#风机一级电机运行参数</el-col
          >
          <el-col class="flex-center" style="flex: 0 0 20%; max-width: 20%"
            >2#风机二级电机运行参数</el-col
          >
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>
        <!-- 内容-第1行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器方向
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器方向
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            负压
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }}
            </span>
            Kpa
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器方向
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器方向
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            负压
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >Kpa
          </el-col>
        </el-row>

        <!-- 内容-第2行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            后轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              工、变频切换
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            后轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              工、变频切换
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            风速
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >m/s
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            后轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              工、变频切换
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            后轴温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              工、变频切换
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            风速
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >m/s
          </el-col>
        </el-row>

        <!-- 内容-第3行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            A相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器状态
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            A相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器状态
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            风量
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >m³/min
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            A相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器状态
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            A相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频器状态
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            风量
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >m³/min
          </el-col>
        </el-row>

        <!-- 内容-第4行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            B相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频远程报警
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            B相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频远程报警
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            CH4
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >mg/m³
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            B相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频远程报警
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            B相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频远程报警
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            CH4
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >mg/m³
          </el-col>
        </el-row>

        <!-- 内容-第5行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            C相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频故障指示
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            C相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频故障指示
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            CO
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >ppm
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            C相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频故障指示
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            C相温度
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            ℃
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频故障指示
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            CO
            <span class="readNumberOnly">
              {{ NamePD_22("Inv3Freq_AI", operator.NO, null, 2) }} </span
            >ppm
          </el-col>
        </el-row>
        <!-- ------------------------------------- -->

        <!-- 内容-第6行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            X轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频控制方式
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            X轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频控制方式
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            X轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频控制方式
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            X轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              变频控制方式
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第7行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            Y轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            频率给定
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            Y轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            频率给定
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            Y轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            频率给定
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            Y轴振动
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            mm/s
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            频率给定
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第8行 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频电流
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            A
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频反馈
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频电流
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            A
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频反馈
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频电流
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            A
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频反馈
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频电流
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            A
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            变频反馈
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            Hz
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第9行--矿井主扇通风机自动注油器运转智能监控界面 -->
        <el-row>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              注油正常
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              油位正常
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              注油正常
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>

          <el-col
            class="flex-center hn-container"
            style="flex: 0 0 10%; max-width: 10%"
          >
            <span>
              油位正常
              <span class="hn-span">
                <div
                  class="indicator-light"
                  :class="
                    NamePD_22('SpeedProt_AI', operator.NO).value === 2
                      ? 'red'
                      : 'grey'
                  "
                ></div>
              </span>
            </span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第10行--矿井主扇通风机自动注油器运转智能监控界面 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            要求注油量（g）：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            后：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            要求注油量（g）：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            后：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第11行--矿井主扇通风机自动注油器运转智能监控界面 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            本次注油量（g）：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            后：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            本次注油量（g）：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            前：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
            后：
            <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span>
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第12行--矿井主扇通风机自动注油器运转智能监控界面 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            下次注油剩余时间：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%"
            >17：42
            <!-- <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span> -->
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            下次注油剩余时间：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            <!-- <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span> -->17：42
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第13行--矿井主扇通风机自动注油器运转智能监控界面 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            加热剩余时间：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%"
            >00：10
            <!-- <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span> -->
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            加热剩余时间：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            <!-- <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span> -->00：10
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>

        <!-- 内容-第14行--矿井主扇通风机自动注油器运转智能监控界面 -->
        <el-row>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            当前油量：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%"
            >795.5g
            <!-- <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span> -->
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            当前油量：
          </el-col>

          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
            952.0g
            <!-- <span class="readNumber">{{
              NamePD_22("Inv1Curr_AI", operator.Divide, 10, 2)
            }}</span> -->
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
          <el-col class="flex-center" style="flex: 0 0 10%; max-width: 10%">
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 公司log -->
    <el-row>
      <div class="kx-log-box">
        <img
          class="kx-img"
          src="@/assets/images/kxauto.png"
          alt="描述图片的文字"
        />
        <span>开轩自动化</span>

        <span class="kx-hezuo">
          商务合作：18509234888（同微信） 技术支持：18691805301（同微信）
        </span>
      </div>
    </el-row>

    <!-- 弹窗 -->
    <form-dialog ref="formRef" />
    <sensorFormDialog ref="sensorRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { act, createWebSocket } from "@/utils/websocket"; //引入websocket
import { operator } from "@/utils/op_enums";
import {
  NamePD_22,
  NamePD_22_GEN,
  NamePD_31,
  NamePD_31_GEN,
} from "@/utils/beltPositioningMethod.ts";

// 引入子组件
import formDialog from "./alarmForm.vue";
import sensorFormDialog from "./sensorForm.vue";
const formRef = ref();
const sensorRef = ref();
const HUANINGBH = [
  "HNLock1_DI",
  "HNLock2_DI",
  "HNLock3_DI",
  "HNLock4_DI",
  "HNLock5_DI",
  "HNLock6_DI",
  "HNLock7_DI",
  "HNLock8_DI",
  "HNLock9_DI",
  "HNLock10_DI",
  "HNLock11_DI",
  "HNLock12_DI",
  "HNLock13_DI",
  "HNLock14_DI",
  "HNLock15_DI",
  "HNLock16_DI",
  "HNLock17_DI",
  "HNLock18_DI",
  "HNLock19_DI",
  "HNLock20_DI",
  "HNLock21_DI",
  "HNLock22_DI",
  "HNLock23_DI",
  "HNLock24_DI",
  "HNLock25_DI",
  "HNLock26_DI",
  "HNLock27_DI",
];
// const NamePD_22 = (
//   key: string,
//   op: operator,
//   op_number?: number,
//   retain?: number
// ) =>
//   computed(() => {
//     return useTagResults(act.PD_22.PD_22[key], op, op_number, retain);
//   });
// const NamePD_22_GEN = (
//   key: string,
//   op: operator,
//   op_number?: number,
//   retain?: number
// ) =>
//   computed(() => {
//     return useTagResults(act.PD_22.PD_22_GEN[key], op, op_number, retain);
//   });
onMounted(() => {
  createWebSocket("%PD_22%");
});
const alarmBtn = () => {
  formRef.value.openDialog();
};
const sensorBtn = () => {
  sensorRef.value.openDialog();
};

const faultResetBtn = () => {
  ElMessage.info("故障复位");
};
</script>

<style lang="scss" scoped>
.imgRow {
  .el-button {
    margin: 10px;
  }
}
.cardBox {
  background-color: var(--el-bg-color);
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  border: 1px solid var(--el-border-color-light);

  /* 左上方标题 */
  .title {
    border-bottom: 1px solid var(--el-border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    h1 {
      color: var(--el-text-color-primary);
      font-size: 20px;
      margin: 0;
      font-weight: 500;
    }

    .el-button {
      background-color: var(--el-color-danger);
      color: var(--el-color-white);
      border: none;
      border-radius: 4px;
      padding: 8px 15px;
      font-weight: 500;

      &:hover {
        background-color: var(--el-color-danger-light-3);
      }
    }
  }

  /* 表格标题 + 四个指示灯 */
  .header-row {
    display: flex;
    align-items: center;
    background-color: var(--el-fill-color-lighter);
    font-weight: 500;
    color: var(--el-text-color-primary);
    padding: 10px;
    .el-col {
      height: 40px;
      display: flex;
      align-items: center;
      border: 1px solid transparent;
    }

    .title-col {
      justify-content: center;

      span {
        font-size: 18px;
      }
    }

    .status-col {
      justify-content: end;
      .status-container {
        display: flex;
        gap: 14px;

        div {
          background: var(--el-fill-color-blank);
          border: 1px solid var(--el-border-color-lighter);
          border-radius: 4px;
          padding: 4px 8px;
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 13px;

          span {
            padding: 0 4px;
          }

          .yuan {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            flex-shrink: 0;
            @extend %status-colors;
          }
        }
      }
    }
  }

  /* 表格的标题 项目 + 状态值 */
  .threeTitle {
    .el-col {
      background-color: var(--el-fill-color) !important;
    }
  }

  /* 每一小格子的边框 背景色 */
  .el-col {
    border: 1px solid var(--el-border-color-lighter);
    text-align: center;
    padding: 6px 5px;
    font-size: 13px;
    color: var(--el-text-color-regular);

    // &:first-child,
    // &:nth-child(5),
    // &:nth-child(7),
    // &:nth-child(9) {
    //   font-weight: 500;
    //   color: var(--el-text-color-primary);
    //   background-color: var(--el-fill-color-lighter);
    // }
  }

  /* 子页面设备参数--指示灯 */
  .indicator-light {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--el-border-color);
    margin: 0 auto;
    @extend %status-colors;
  }

  /* 华宁沿线闭锁 */
  .huaning-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-primary);
    font-weight: 500;
  }

  // 数值
  .readNumber {
    margin: 0 10px;
  }

  // 数值
  .readNumberOnly {
    margin: 0 10px;
  }
  .hn-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding: 8px;
    align-items: center;
    // background-color: var(--el-fill-color-lighter);
    border-radius: 4px;

    span {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hn-span {
      display: inline-flex;
      align-items: center;
    }
  }

  .index-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    justify-content: flex-start;
    background-color: var(--el-fill-color-lighter);
    border-radius: 4px;
    min-height: 40px;
    align-items: center;
  }

  .index-circle {
    width: 26px;
    height: 26px;
    background-color: var(--el-border-color);
    border-radius: 50%;
    color: var(--el-text-color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    @extend %status-colors;
  }

  // 定义基础颜色类（只定义一次）
  %status-colors {
    &.green {
      background-color: var(--el-color-success);
    }
    &.red {
      background-color: var(--el-color-danger);
    }
    &.yellow {
      background-color: var(--el-color-warning);
    }
    &.grey {
      background-color: var(--el-border-color-dark); // 比默认边框色更深的灰色
    }
  }
}

/* 水平垂直居中 */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
